<template>
        <div class="Bread">
                <el-breadcrumb separator="/">
                        <el-breadcrumb-item>靶场管理</el-breadcrumb-item>
                        <el-breadcrumb-item>靶场列表</el-breadcrumb-item>
                </el-breadcrumb>
        </div>
        <div class="HeadBox">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="靶场名称：">
                                <el-input v-model="formInline.RangeName" placeholder="请输入靶场名称" />
                        </el-form-item>
                        <el-form-item label="难度：">
                                <el-select v-model="formInline.RangeLevel" placeholder="请选择难度" style="width: 135px;">
                                        <el-option label="简单" value="easy" />
                                        <el-option label="中等" value="medium" />
                                        <el-option label="困难" value="hard" />
                                        <el-option label="地狱" value="hell" />
                                </el-select>
                        </el-form-item>
                        <el-form-item label="所属分类：">
                                <el-select v-model="formInline.RangeType" placeholder="请选择分类" style="width: 135px;">
                                        <el-option label="前端" value="web" />
                                        <el-option label="后端" value="java" />
                                        <el-option label="UI" value="ui" />
                                </el-select>
                        </el-form-item>
                        <el-form-item label="文件类型：">
                                <el-select v-model="formInline.FileType" placeholder="请选择文件类型" style="width: 135px;">
                                        <el-option label="JS" value="js" />
                                        <el-option label="JSON" value="json" />
                                        <el-option label="PNG" value="png" />
                                </el-select>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="getData">
                                        <!-- @click="SubmitForm" -->
                                        搜索
                                </el-button>
                                <el-button type="round" @click="RangeReset">
                                        <!-- @click="ResetForm" -->
                                        重置
                                </el-button>
                        </el-form-item>
                </el-form>
                <el-button type="primary" @click="gotoNew">新增靶场</el-button>
        </div>
        <div class="RangeList">
                <el-table :data="data" class="RangeListBox" :header-cell-style="{ background: '#F5F5F5' }"
                        :row-style="{ height: 80 + 'px' }">
                        <el-table-column prop="name" label="靶场名称" />
                        <el-table-column prop="level" label="难度" />
                        <el-table-column prop="category" label="所属分类" />
                        <el-table-column prop="fileType" label="文件类型" />
                        <el-table-column label="操作" width="400px">
                                <template #default="scoped">
                                        <el-button type="primary">
                                                查看
                                        </el-button>
                                        <el-button type="primary">
                                                编辑
                                        </el-button>
                                        <el-popconfirm @confirm="handleClick(scoped.row)" title="您确定要删除吗?">
                                                <template #reference>
                                                        <el-button type="danger">删除</el-button>
                                                </template>
                                        </el-popconfirm>
                                </template>
                        </el-table-column>
                </el-table>
                <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="state.totalCount" />
        </div>
</template>
    
<script setup lang='ts'>
import { reactive } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

const formInline = reactive({
        RangeName: '',
        RangeLevel: '',
        RangeType: '',
        FileType: ''
})

interface DataType {
        id: string;
        //靶场名字
        name: string;
        //靶场难度
        level: string;
        //靶场分类
        category: string;
        //靶场文件类型
        fileType: string;
        //被谁创建的id(创建者可以删除自己创建的靶场)
        createBy: string;
}
//模拟的列表假数据
const data: DataType[] = [
        {
                id: "1",
                name: '靶场名称1',
                level: "简单",
                category: 'SQL注入类',
                fileType: "镜像文件",
                createBy: "1"
        },
        {
                id: "2",
                name: '靶场名称2',
                level: "中等",
                category: '扫描类',
                fileType: "war",
                createBy: "2"
        },
        {
                id: "3",
                name: '靶场名称3',
                level: "高难",
                category: '文件类',
                fileType: "zip",
                createBy: "3"
        },
];
function getData() {
        console.log(formInline);
}
function RangeReset(){
        formInline.FileType='',
        formInline.RangeLevel='',
        formInline.RangeName='',
        formInline.RangeType=''
}
function gotoNew() {
        router.push("/nav/newRange")
}
const state = reactive({
        totalCount: 0,
})
//分页参数
const params = {
        pageNumber: 1,
        pageSize: 5
}
const handleClick = (scoped: any) => {
        console.log('click', scoped)
}
//切换分页
function currentChange(pageNumber: number) {
        console.log("pageNumber", pageNumber)
        params.pageNumber = pageNumber
}
</script>
    
<style lang="less" scoped>
.Bread {
        width: 100%;
        height: 5%;
        background-color: #F5F5F5;
        box-sizing: border-box;
}

.HeadBox {
        margin-top: 2%;
        margin-left: 2%;
        margin-bottom: 2%;
        width: 95%;
}

.RangeListBox {
        display: flex;
        margin-top: 2%;
        margin-left: 2%;
        width: 95%;
}

::v-deep .el-table__header-wrapper {
        thead {
                th {
                        div {
                                font-weight: 500;
                                font-size: 20px;
                                color: black;
                        }
                }
        }
}
</style>